/*=========================================*/
/*==========Town Transition CSS============*/
/*=========================================*/
.transition {
	opacity: -OPACITY-;
	-moz-opacity: -OPACITY-;
	/*filter: alpha(opacity=-SHADINGx100-);*/
	z-index: 2;
}
.buildingimg {
	z-index: 1;
}
#locations li a {
	z-index: 3;
}

/*-------------------------------*/
/*----------City Phases----------*/
/*-------------------------------*/
#mainview_transition {
	width: 720px;
	height: 440px;
	position: relative;
	top: -440px;
}
#city #container .phase1 #mainview_transition {
	background-image:url(-WEBADDRESS--EFFECT-/town/bg/city_phase1.jpg);
}
#city #container .phase2 #mainview_transition,
#city #container .phase3 #mainview_transition {
	background-image:url(-WEBADDRESS--EFFECT-/town/bg/city_phase2.jpg);
}
#city #container .phase4 #mainview_transition,
#city #container .phase5 #mainview_transition, 
#city #container .phase6 #mainview_transition {
	background-image:url(-WEBADDRESS--EFFECT-/town/bg/city_phase3.jpg);
}
#city #container .phase7 #mainview_transition, 
#city #container .phase8 #mainview_transition,
#city #container .phase9 #mainview_transition {
	background-image:url(-WEBADDRESS--EFFECT-/town/bg/city_phase4.jpg);
}
#city #container .phase10 #mainview_transition,
#city #container .phase11 #mainview_transition,
#city #container .phase12 #mainview_transition {
	background-image:url(-WEBADDRESS--EFFECT-/town/bg/city_phase5.jpg);
}
#city #container .phase13 #mainview_transition,
#city #container .phase14 #mainview_transition,
#city #container .phase15 #mainview_transition {
	background-image:url(-WEBADDRESS--EFFECT-/town/bg/city_phase6.jpg);
}
#city #container .phase16 #mainview_transition,
#city #container .phase17 #mainview_transition {
	background-image:url(-WEBADDRESS--EFFECT-/town/bg/city_phase7.jpg);
}
#city #container .phase18 #mainview_transition,
#city #container .phase19 #mainview_transition {
	background-image:url(-WEBADDRESS--EFFECT-/town/bg/city_phase7.jpg);
}
#city #container .phase20 #mainview_transition {
	background-image:url(-WEBADDRESS--EFFECT-/town/bg/city_phase8.jpg);
}

/*-------------------------------*/
/*-----------Buildings-----------*/
/*-------------------------------*/
#city #container #mainview #locations .museum .transition {
	left:-8px;
	top:-38px;
	width:105px;
	height:85px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_museum.gif);
}
#city #container #mainview #locations .shipyard .transition {
	left:-22px;
	top:-20px;
	width:129px;
	height:100px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_shipyard.gif);
}
#city #container #mainview #locations .warehouse .transition {
	left:0px;
	top:-33px;
	width:126px;
	height:86px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_warehouse.gif);
}
#city #container #mainview #locations .wall .transition {
	left:-500px;
	top:-15px;
	width:720px;
	height:137px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_wall.gif);
}
#city #container #mainview #locations .tavern .transition {
	left:-10px;
	top:-15px;
	width:111px;
	height:65px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_tavern.gif);
}
#city #container #mainview #locations .palace .transition {
	left:-10px;
	top:-42px;
	width:106px;
	height:97px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_palace.gif);
}
#city #container #mainview #locations .academy .transition {
	left:-19px;
	top:-31px;
	width:123px;
	height:90px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_academy.gif);
}
#city #container #mainview #locations .workshop-army .transition {
	left:-19px;
	top:-31px;
	width:106px;
	height:85px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_workshop.gif);
}
#city #container #mainview #locations .safehouse .transition {
	left:5px;
	top:-15px;
	width:84px;
	height:58px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_safehouse.gif);
}
#city #container #mainview #locations .branchOffice .transition {
	left:-19px;
	top:-31px;
	width:109px;
	height:84px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_branchOffice.gif);
}
#city #container #mainview #locations .embassy .transition {
	left:-5px;
	top:-31px;
	width:93px;
	height:85px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_embassy.gif);
}
#city #container #mainview #locations .palaceColony .transition {
	left:-10px;
	top:-42px;
	width:109px;
	height:95px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_palaceColony.gif);
}
#city #container #mainview #locations .townHall .transition {
	left:-5px;
	top:-60px;
	width:104px;
	height:106px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_townhall.gif);
}
#city #container #mainview #locations .barracks .transition {
	left:0px;
	top:-33px;
	width:100px;
	height:76px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_barracks.gif);
}
#city #container #mainview #locations .port .transition {
	left:-65px;
	top:-35px;
	width:163px;
	height:131px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/building_port.gif);
}
#city #container #mainview #locations li .constructionSite ~ .transition {

	left:-20px;
	top:-30px;
	width:114px;
	height:81px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/buildings/constructionSite.gif);
}

/*-------------------------------*/
/*-------------Flags-------------*/
/*-------------------------------*/
#city #container #mainview #locations .buildingGround.land .transition {
	width: 29px;
	height: 40px;
	bottom: 15px;
	left: 36px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/flags/flag_red.gif);
}
#city #container #mainview #locations .buildingGround.shore .transition {
	width: 29px;
	height: 40px;
	bottom: 15px;
	left: 36px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/flags/flag_blue.gif);
}
#city #container #mainview #locations .buildingGround.wall .transition {
	width: 29px;
	height: 40px;
	bottom: 15px;
	left: 36px;
	position: relative;
	background-image:url(-WEBADDRESS--EFFECT-/town/flags/flag_yellow.gif);
}